<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css\nloging.css" type="text/css">
    <script src="JS\vue.js"></script>
    <script src="JS\jquery-1.8.3.min.js"></script>
    <script src="./axios.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="experience-wrapper" class="app2">
        <div class="nike-unite">
            <header>
                <div class="nike-unite-swoosh"></div>
                <div class="view-header">创建您的NIKE账户</div>
                <div class="tipp">
                    我们需要验证您的号码以继续操作。我们将通过短信向您发送一条一次性的验证码
                </div>
            </header>
            <form action="#" class="nike-unite-form">
                <div class="input-group mb-3" id="phon">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">+86</span>
                    </div>
                    <input type="text" class="form-control" aria-label="Sizing example input"
                        aria-describedby="inputGroup-sizing-default" placeholder="手机号码" ref="mobilephone" v-model="uiphone">
                </div>
                <div v-show="flag1" style="color: #fe0000;" >请输入电话号码</div>
                <div class="input-group mb-3" id="passs">
                    <input type="text" class="form-control" aria-label="Sizing example input"
                        aria-describedby="inputGroup-sizing-default" placeholder="输入验证码" ref="yanzhengma" v-model="upw">
                </div>
                <div v-show="flag2" style="color: #fe0000;" >请输入验证码</div>
                <div>
                    国家/地区
                    <br />
                    <div id="borderr"> 
                        <select class="sell">
                            <option value="checked">中国大陆</option>
                            <option v-for="item in country">{{item}}</option>
                        </select></div>
                </div>
                <button class="buu1" @click="tips">继续</button>
                <div class="nike-vip">已经是会员？
                    <a href="./loginn.html">立即登录</a>
                </div>
        </div>
        </form>
    </div>


    <script>
        let v2 = new Vue({
            el: ".app2",
            data: {
                country: ["蒙古", "朝鲜", "韩国", "日本", "菲律宾", "越南", "老挝", "柬埔寨", "缅甸", "泰国"],
                flag1:false,
                flag2:false,
                uiphone:'',
                upw:''
            },
            methods:{
                tips:function(){
                    let p1 = this.$refs.mobilephone.value;
                    let p2 = this.$refs.yanzhengma.value;
                    if(p1==""){
                        this.flag1=!this.flag1;
                    }
                    if(p2==""){
                        this.flag2=!this.flag2;
                    }
                    // 
                    if(this.uiphone!=""&&this.upw!=""){
                        console.log("注册ing");
                    axios.get('http://127.0.0.1/list/add',{
                        params: {
                        name: this.uiphone,
                        password: this.upw,
                        }
                    }).then(res=>{
                        console.log(res.data);
                       
                    }).catch(err=>{
                        console.log("操作失败" + err);
                    })
                }
    },
                }
            
        })
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>